<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>杨澎锴的实践作业22——使用D3建立坐标轴</title>
    <!-- 使用d3js专注于内容的创作 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
    <style>
      .grid-line {
        stroke: red;
        shape-rendering: crispEdges;
        stroke-opacity: 0.2;
      }
    </style>
  </head>
  <body>
    <h3>notes</h3>
    <ol>
      <li>路由器本身就是一个电脑，然后操作系统</li>
      <li>javascript的编程语言最开始就是针对于网页来工作的</li>
      <li></li>
    </ol>
    <footer>
      <p>
        一到网络上，我们就从一个个有温度有怪癖的个体，压扁成了一个个001010011001001...我们每个人，连皱眉时的弯度，睡觉时的呼吸声都不一样，却最终被这个时代不可逆的潮流换算成了无穷尽的零与一的组合。——@Summer-Wayfarer
      </p>
    </footer>
    <script>
      // 定义变量
      var height = 500,
        width = 500,
        margin = 25,
        offset = 50,
        axisWidth = width - 2 * margin,
        svg;
      // 使用D3选择body来添加相对应的元素
      svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      var scale = d3
        .scaleTime()
        // 内置时间js格式
        .domain([new Date(2012, 0, 1), new Date()])
        .range([0, axisWidth]);

      var axis = d3.axisBottom(scale);

      svg.append("g").attr("transform", "translate(20,20)").call(axis); //在图形中加入坐标轴

      var axis = d3.axisRight(scale); //使用比例尺创建坐标轴

      svg.append("g").call(axis);
      var scale = d3.scaleLinear().domain([0, 1]).range([0, axisWidth]);
      var axis = d3
        .axisBottom()
        .scale(scale)
        .ticks(5) //刻度数量
        .tickSize(3) // <-A
        .tickPadding(10); // <-B
      svg.append("g").attr("transform", "translate(20,120)").call(axis);

      svg
        .append("g")
        .attr("class", "x-axis")
        .attr("transform", function () {
          // <-A
          return "translate(" + margin + "," + (height - margin) + ")";
        })
        .call(axis);
      d3.selectAll("g.x-axis g.tick") // <-B
        .append("line") // <-C
        .classed("grid-line", true)
        .attr("x1", 0) // <-D
        .attr("y1", 0)
        .attr("x2", 0)
        .attr("y2", -(height - 2 * margin)); // <-E
    </script>
  </body>
</html>
